<template>
	<view class="content">
		<!-- header -->
		<view class="header">
			<uni-section class="mb-10" title="行政区域" sub-title="" type="line"></uni-section>
			<!-- 三级联动 / 省市区选择器 -->
			<view class="ProvincesCitiesDistricts">
				 <pickerAddress @change="change">{{txt}}</pickerAddress>
			</view>
				       
			
		</view>
		<!-- 状态栏 / 刷新搜索 /  -->
		<view class="main">
			<view class="mainSons">
				<!-- left / selected -->
				<uni-data-select
				  v-model="value"
				  :localdata="range"
				  @change="change"
				  :clear="false"
				  placeholder="可用"
				></uni-data-select>
				<!-- center / 关键字搜索框 -->
					<text>关键字：</text> <uni-easyinput 
					class="uni-mt-5" trim="all" v-model="value" 
					placeholder="编码丶名称丶拼音简码" @input="input">
					</uni-easyinput>
				<!-- right / 刷新按钮 -->
				<button type="primary">刷新</button>
			</view>
			      
				  <!-- table / 表格显示内容数据 -->
				<view class="uni-container">
					<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="2" align="center">行号</uni-th>
							<uni-th width="8" align="center">编码</uni-th>
							<uni-th width="8" align="center">名称</uni-th>
							<uni-th width="5" align="center">邮政编码</uni-th>
							<uni-th width="5" align="center">有效状态</uni-th>
							<uni-th width="5" align="center">内置否</uni-th>
							<uni-th width="8" align="center">操作时间</uni-th>
	
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>{{ item.date }}</uni-td>
							<uni-td>
								<view class="name">{{ item.name }}</view>
							</uni-td>
							<uni-td align="center">{{ item.address }}</uni-td>
							<uni-td>
							
							</uni-td>
						</uni-tr>
					</uni-table>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
				</view>
			
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/external/zxp-uniRegionSheet.vue'
	export default {
		components:{
			pickerAddress
		},
		data() {
			return {
				 txt: '行政区域选择',
				 title: 'Hello',
					value: "",
					range: [
						{text: "可用"},
						{text: "禁用"},
						{text: "全部"},
					],
					inherit:'继承展示数据',
					searchVal: '',
					tableData: [],
					// 每页数据量
					pageSize: 10,
					// 当前页
					pageCurrent: 1,
					// 数据总量
					total: 0,
					loading: false
			};
		},
		methods:{
			 change(data) {
				this.txt = data.data.join('')
				console.log(this.txt)
				
				// 把拿到的结果当作参数 写入调用接口 查找相对于地区数据
				
			}
		},
		
	}
</script>

<style lang="scss">
	::v-deep .uni-table-th{
		font-size: 10px !important;
	}
.content{
	.header{
		display: flex;
		flex-direction: column;
		.ProvincesCitiesDistricts{
			display: flex;
			padding-left: 20px;
			align-items: center;
			border-radius: 20px;
			height: 30px;
			background-color: #e9e9e9;
			font-size: 12px;
		}
	}
	.main{
		
		.mainSons{
			padding: 6px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 10px;
			text{
				margin: 6px;
			}
			button{
				font-size: 10px;
				margin: 6px;
				line-height: 20px;
				height: 20px;
			}
		}
	}
}
</style>
